<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :show-close="false"
    :visible.sync="visible">
    <el-form  :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
      <el-form-item label="规则名称：" prop="maskingName">
        <el-input v-model="dataForm.maskingName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="规则表达式：" prop="maskingRegix">
        <el-input v-model="dataForm.maskingRegix" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="规则替换值：" prop="maskingTarget">
        <el-input v-model="dataForm.maskingTarget" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <div style="padding-left:60px;color:#17B3A3;word-wrap: break-word;word-break: normal;" v-if="veriicationStr!=''"><span>验证成功：</span>{{veriicationStr}}</div>
    <span  slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
    import request from '@/utils/request'
  export default {
    components:{},
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '0') {
          callback(new Error('请选择请求类型'));
        } else {
          if (this.dataForm.method !== 'POST') {
            this.$refs.dataForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        conmitFormData:null,
        jsonType:'',
        veriicationStr:"",
        hasJsonFlag:true,  // json是否验证通过
        // json数据
        resultInfo: {},

        methodsList: [],
        // -------------
        visible: false,
        menuList: [],
        menuListTreeProps: {
          label: 'name',
          children: 'children'
        },
        dataForm: {
          "maskingName": "",
          "maskingRegix": "",
          "maskingTarget": ""
        },
        dataRule: {
          name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
          url: [{ required: false, message: '地址不能为空', trigger: 'blur' }],
          method: [{required: false,  validator: validatePass , trigger: 'blur' }],
          contentType: [{ required: false, message: '参数类型不能为空', trigger: 'change' }],
          keyPath: [{ required: false, message: 'token值所处路径不能为空', trigger: 'blur' }]
        }
      }
    },
    methods: {
      show(){
        this.visible = true 
      },
      closeDialog(){ 
        this.dataForm = {
          
        } 
        this.visible = false 
      },
 
 
      editData(v){
        this.visible = true 
        this.dataForm = JSON.parse(JSON.stringify(v)) //复制编辑对象数据
      },
      init (row) {
    
         
      },
      // 表单提交
      dataFormSubmit () {
        let p = JSON.parse(JSON.stringify(this.dataForm))
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            request({
              url:`/ht-datadevelop/decryption/decryptionSaveOrUpdate`,
              method: 'post',
              data: p
            }).then((res) => {
              if (res.code === 200) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500,
                  onClose: () => {
                    this.closeDialog()
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
      }
    }
  }
</script>


<style lang="scss" scoped>
  // /deep/.el-select{
  //   display: block !important;
  // }
  .el-form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .el-form-item{
    width: 50%;
  }
 ul{
  margin-left: 0 !important;
  padding-left: 0 !important;
  .lis{
    margin-bottom: 6px;
    list-style: none;
    display: flex;
    span:nth-child(1){
      width: 45%;
    }
    span:nth-child(2){
      width: 45%;
    }
    span:nth-child(3){
      width: 10%;
      text-align: center;
      padding-top: 6px;
      cursor: pointer;
      color: red;
    }
    span{
      display: block;
      >>>.el-input{
        display: inline-block;
        width:80%;
      }
    }
  }
 }
</style>